<template>
    <nut-navbar fixed placeholder>
        <template #content>
            <nut-tabs v-model="tab2value" @click="changeTabList">
                <nut-tab-pane title="商品" pane-key="product"></nut-tab-pane>
                <nut-tab-pane title="评价" pane-key="comment"></nut-tab-pane>
                <nut-tab-pane title="详情" pane-key="detail"></nut-tab-pane>
            </nut-tabs>
        </template>
    </nut-navbar>

    <div id="product">
        <productInfoCom :productInfo="productInfo"></productInfoCom>
    </div>

    <div id="comment">
        <p class="module-title">评论</p>
        <commentInfoCom></commentInfoCom>
    </div>

    <div id="detail">
        <p class="module-title">商品详情</p>
        <detailInfoCom :productInfo="productInfo"></detailInfoCom>
    </div>

    <div class="bottom">
        <div class="flex-box">
            <div class="customer-icon">
                <IconFont name="people"></IconFont>
                <span class="icon-text">客服</span>
            </div>
            <div class="cart-icon" @click="linkToProductCart()">
                <IconFont name="cart"></IconFont>
                <span class="icon-text">购物车</span>
            </div>
        </div>
        <div class="flex-box">
            <nut-button type="primary" plain class="cart-button" @click="addCart()"
                >加入购物车</nut-button
            >
            <nut-button type="primary" @click="linkToOrderConfirm()">立即购买</nut-button>
        </div>
    </div>
</template>

<script setup>
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { ref, onMounted } from 'vue'

const tab2value = ref('product')
let isPageScroll = ref(false)
let isShowTab = ref(false)

const domList = [
    {
        id: '#product',
        paneKey: 'product'
    },
    {
        id: '#comment',
        paneKey: 'comment'
    },
    {
        id: '#detail',
        paneKey: 'detail'
    }
]
onMounted(() => {
    setTimeout(() => {
        domList.forEach((item, index, arr) => {
            // -400 参数可调，在元素上边界进出-400边界会触发
            Taro.createIntersectionObserver()
                .relativeToViewport({ bottom: -400, top: 0 })
                .observe(item.id, (res) => {
                    // 在执行pageScrollTo不识别
                    if (isPageScroll.value) {
                        return
                    }
                    // 进出下边界和上边界都会触发，此处判断进入下边界才执行
                    if (res.boundingClientRect.top > 0) {
                        // 进入下边界
                        if (res.intersectionRatio > 0) {
                            tab2value.value = item.paneKey
                            // 评价tab进入，显示tab导航
                            if (item.paneKey === 'comment') {
                                isShowTab.value = true
                            }
                        } else {
                            if (item.paneKey === 'comment') {
                                isShowTab.value = false
                            }
                            // 退出下边界，设置上一个tab
                            const target = index > 0 ? index - 1 : 0
                            tab2value.value = arr[target].paneKey
                        }
                    }
                })
        })
    }, 1000)
})
const changeTabList = (tab) => {
    tab2value.value = tab.paneKey
    console.log('tab.paneKey', tab.paneKey)
    // 设置滚动中参数
    isPageScroll.value = true
    Taro.pageScrollTo({
        selector: `#${tab.paneKey}`,
        offsetTop: -44,
        duration: 300,
        success: () => {
            isPageScroll.value = false
        }
    })
}

const addCart = () => {
    // 加入购物车
    Taro.showToast({
        title: '加入购物车成功',
        icon: 'success',
        duration: 2000
    })
}

const linkToOrderConfirm = () => {
    Taro.navigateTo({
        url: `/pages/order/confirm/index?from=detail&product_id=${productInfo.value.id}`
    })
}

const linkToProductCart = () => {
    Taro.navigateTo({
        url: `/pages/product/cart/index`
    })
}

// 初始化逻辑
import { productList } from '@/config/index'
import productInfoCom from './productInfo.vue'
const Instance = Taro.getCurrentInstance()
const urlParams = Instance.router.params
const productInfo = ref(productList.find((v) => v.id == urlParams.id) || {})

import commentInfoCom from './commentInfo.vue'
import detailInfoCom from './detailInfo.vue'
</script>

<style lang="less">
.nut-tab-pane {
    padding: 0;
}
.module-title {
    padding: 16px;
    font-size: 32px;
    font-weight: bold;
}

.bottom {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    width: 750px;
    padding: 32px 32px 44px 32px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .flex-box {
        display: flex;
        align-items: center;
    }

    .customer-icon {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    .cart-icon {
        margin-left: 32px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    .icon-text {
        font-size: 16px;
    }

    .cart-button {
        margin-right: 32px;
    }
}
</style>
